// initialize 
THUMB_WIDTH = 50;
THUMB_HEIGHT = 50;
THUMB_MARGIN_X = 10;
THUMB_MARGIN_Y = 10;
NAME_HEIGHT = 15;
NAME_MARGIN_TOP=5;
MEMBER_COUNT=60;
FONT = "15px 宋体";
BASE_LINE = "top";
COLUMN = 10;
prev_x = 0;
prev_y = 0;

family = new Array();

$(document).ready(function(){
    $("#canvas").mousemove(function(e){
	$("#msg").text($("#msg").text()+" x: "+e.pageX+"; y: "+e.pageY);
    });
    $("#canvas").hover(function(e){
	//$("#msg").text($("#msg").text() + "\nx: "+e.pageX+"; y: "+e.pageY);
	return false;
    });
    $("#canvas_top").click(function(e){
	$("#msg").html($("#msg").html() + "click me <br/>");
    });
    var canvas = $("#canvas_top")[0];	
    canvas.addEventListener('mousemove', onMouseMove, false); 
});
function onMouseMove(e){
    var x = Math.floor((e.pageX-$("#canvas").offset().left) / (THUMB_WIDTH+THUMB_MARGIN_X)) * (THUMB_WIDTH+THUMB_MARGIN_X);
    var y = Math.floor((e.pageY-$("#canvas").offset().top) / (THUMB_HEIGHT + NAME_HEIGHT + THUMB_MARGIN_X + NAME_MARGIN_TOP)) * (THUMB_HEIGHT + NAME_HEIGHT + THUMB_MARGIN_X + NAME_MARGIN_TOP);

    // in the same block, do nothing
    if (prev_x == x && prev_y == y)
	return;

    // move to another block, update the new block position
    prev_x = x;
    prev_y = y;

    // clear the mast layer and stroke the new border
    var canvas = $("#canvas_top")[0];
    var cxt = canvas.getContext("2d");
    cxt.clearRect(0,0,600,600);
    cxt.strokeStyle = "blue";
    cxt.strokeRect(x, y, THUMB_WIDTH+THUMB_MARGIN_X, THUMB_HEIGHT + NAME_HEIGHT + THUMB_MARGIN_X + NAME_MARGIN_TOP);
    cxt.stroke();

}

// draw a member on a canvas
function drawMember(context, url, name, x, y)
{
    var img = new Image();
    img.onload = function(){context.drawImage(img, x, y, THUMB_WIDTH, THUMB_HEIGHT);};
    img.src = url;
    context.font = FONT; 
    context.textBaseline = BASE_LINE;
    context.fillText(name, x,y+THUMB_HEIGHT+NAME_MARGIN_TOP);
}
var canvas = $("#canvas")[0];
var cxt = canvas.getContext("2d");

member_position = new Array();

for(i=0; i<MEMBER_COUNT; i++)
{
    var r = parseInt(i/COLUMN);
    var c = i%COLUMN;
    //document.write("row: "+r+"; column: "+c+"<br/>");
    drawMember(cxt, "./img/"+i+".jpg", "杨德伟", 
	       c*(THUMB_WIDTH+THUMB_MARGIN_X),
	       r*(THUMB_HEIGHT + NAME_HEIGHT + THUMB_MARGIN_X + NAME_MARGIN_TOP));    
}

